<template>
  <el-dialog
    title="添加用户"
    :visible.sync="addDialogVisible"
    width="50%"
    :close-on-click-modal="false"
    @close="addDialogUserClosed"
  >
    <el-col :span="7" style="display: flex; align-items: center">
      <span style="width:100px;">用户名</span>
      <el-input
        placeholder="请输入用户名搜索"
        v-model="queryForm.query.userName"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 10px"
        @click="searchUserlist"
        >搜索</el-button
      >
    </el-col>
    <!-- 添加用户下的用户表 -->
    <hawk-table
      v-model="multipleSelection"
      :page="queryForm.page"
      :table-data="tableData"
      :number="true"
      :options="[
        { key: 'userName', label: '用户名' },
        { key: 'company', label: '所属公司' },
        { key: 'department', label: '所属部门' },
        { key: 'phone', label: '联系电话' },
        { key: 'email', label: '邮箱地址' }
      ]"
    >
    </hawk-table>
    <div class="bottom-btns">
      <div class="bottom-btns-left">
        <div class="bottom-btns-left-num">
          {{ multipleSelection.length }} 选择
        </div>
      </div>
      <!-- 添加用户分页组件 -->
      <el-pagination
        background
        @size-change="handleSizeChangeUser"
        @current-change="handleCurrentChangeUser"
        :current-page.sync="queryForm.page.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryForm.page.size"
        layout=" prev, pager, next,sizes"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 底部区 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisibleUser = false">取 消</el-button>
      <el-button type="primary" @click="saveGroupUser">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script type="text/javascript">
/*
 * @author 宋辉辉
 * @description 新增告警组用户弹框
 * @api 后台接口地址
 * @since 文件生成时间
 * @update 代码更新时间
 * @modifier 修改人
 * @bug bug名称或无
 * @version 版本号 例:v1.0.0
 */
import { getList as getUser } from '@/api/system/user'
import {insertUser} from "@/api/monitor/config/group"
export default {
  props: ['groupId'],
  data() {
    return {
      addDialogVisible: false,
      queryForm: {
        query: {
          userName: '',
          groupId: ''
        },
        page: {
          current: 1,
          size: 10
        }
      },
      multipleSelection: [],
      tableData: [],
      saveUserFromData: {
        groupId: '',
        userid: []
      },
      total: 0,
      formTitle: ''
    }
  },
  methods: {
    //获取所有用户（添加按钮下的用户表）
    async user() {
      const { data } = await getUser(this.queryForm)
      this.tableData = data.records
      this.total = data.total
    },
    //添加用户时展示所有用户
    addUser() {
      this.addDialogVisible = true
      this.queryForm.groupId = this.groupId
      this.user()
    },
    //添加用户的列表搜索
    async searchUserlist() {
      if (this.queryForm.query.userName == '') {
        this.$message({
          type: 'warning',
          message: '请输入搜索信息！'
        })
        return
      }
      this.queryForm.page.current = 1
      this.user()
    },
    //提交添加告警组的用户
    saveGroupUser() {
      let list = []
      this.multipleSelection.forEach(item => {
        list.push(item.id)
      })
      this.multipleSelection = []
      insertUser(this.groupId, list)
      this.addDialogUserClosed()
    },
    //添加用户完成后关闭遮罩层
    addDialogUserClosed() {
      this.queryForm = this.$options.data().queryForm
      this.addDialogVisible = false
      this.$emit('init')
    },
    //添加用户时的分页尺寸
    handleSizeChangeUser(val) {
      this.queryForm.page.size = val
      this.user()
    },
    //添加用户分页的页码
    handleCurrentChangeUser(val) {
      this.queryForm.page.current = val
      this.user()
    },
  }
}
</script>

<style scoped></style>
